<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer" :append-to-body="true" size="50%">
    <div class="ruleForm">
        <div class="panel">
            <div class="panel-header">
                <div class="bl"></div>
                <div class="title">{{ formDrawer.title }}</div>
            </div>
            <div class="panel-body">
                <service-subform ref="OrderProduct"></service-subform>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <div class="bl"></div>
                <div class="title">酒店协议</div>
            </div>
            <div class="panel-body">
                <protocol-subform ref="OrderProtocol"></protocol-subform>
            </div>
        </div>

        <div class="panel" v-if="type!=2 && type!=4">
            <div class="panel-header">
                <div class="bl"></div>
                <div class="title">收款信息</div>
            </div>
            <div class="panel-body">
                <income-subform ref="OrderIncome"></income-subform>
            </div>
        </div>

        <div class="btn-box">
            <el-button type="primary" @click="submit">提交并审核</el-button>
        </div>
    </div>

</el-drawer>
</template>

<script>
import IncomeSubform from '../income/income-subform.vue'
import serviceSubform from './service-subform.vue'
import ProtocolSubform from '../protocol/protocol-subform.vue'

import {
    appendServiceApi
} from '@/api/order/service';

export default {
    components: {
        serviceSubform,
        IncomeSubform,
        ProtocolSubform
    },
    data() {
        return {
            order_id: '',
            type: '',
            formDrawer: {
                title: '',
                visible: false,
            }
        }
    },
    methods: {
        showDrawer(order_id, type) {
            this.order_id = order_id;
            this.type = type;
            this.formDrawer.visible = true;
            let titles = {
                1: '加桌',
                2: '减桌',
                3: '加菜',
                4: '减菜'
            };
            this.formDrawer.title = titles[type];
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
        submit() {
            let that = this;
            let forms = Object.values(this.$refs);
            let promises = forms.map(form => {
                if (form) {
                    form.submit()
                }
            });

            Promise.all(promises)
                .then(() => {
                    let data = {};
                    for (let key in this.$refs) {
                        if (!this.$refs[key]) continue;

                        let formData = this.$refs[key].ruleForm;
                        formData['order_id'] = that.order_id;
                        if (key != 'OrderIncome') formData['type'] = that.type;

                        data[key] = formData;
                    }

                    appendServiceApi(data).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.$emit("doRefresh", this.order_id);
                            this.closeDrawer();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                })
                .catch(error => {
                });
        }
    }
}
</script>
